<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="cbAll" />
		<span id="txt">全选</span>
		<div>
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
		</div>
	</body>
</html>
<script>
	var ckAll = document.getElementById("cbAll");

	var txt = document.getElementById("txt");

	var cks = document.querySelectorAll("div input");



	ckAll.onclick = function() {
		for (var i = 0; i < cks.length; i++) {
			cks[i].checked = this.checked;
		}
		txt.innerText = this.checked ? "全不选" : "全选";

	};
	for (var i = 0; i < cks.length; i++) {
		cks[i].onclick = fn;
	}

	function fn() {
		var flag = true;
		for (let i = 0; i < cks.length; i++) {
			if (!cks[i].checked) {
				flag = false;
				break;
			}
		}
		ckAll.checked = flag;
		txt.innerText = flag ? "全不选" : "全选";
	}
</script>
